<!-- 搜索路由 -->
<template>
  <div class="search">
    <search-input :showSearchPanel='showSearchPanel'></search-input>
    <search-panel v-if="flag" :showSearchPanel='showSearchPanel'></search-panel>
    <div class="seaGoodsAssort">
      <div class="showLeftNav">
        <ul class="content">
          <li :class="{goodsNav:true,current:_surrent === i}" v-for="(item,i) in rearchSideNavData" :key="i" @click="sideNavCli(i)" ref="siedeNav">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="showRightGoods">
        <ul class="goodsParent" ref="goods">
          <li class="commodity_sector" v-for="(goods,i) in rearchSideNavData" :key="i">
            <div class="title">
              <span>{{goods.name}}</span>
              <a href="">查看更多></a>
            </div>
            <ul class="phoneType" v-if="goods.tag === 'phone'">
              <li v-for="(phone,i) in goods.category" :key="i">
                <img :src="phone.icon" alt="">
              </li>
            </ul>
            <ul class="goods">
              <li class="goodsItems" v-for="(goodsItem,i) in goods.items" :key="i">
                <img :src="goodsItem.icon" alt="">
                <span>{{goodsItem.title}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import searchInput from './Children/SearchNav'
import { mapState } from 'vuex'
import BScroll from 'better-scroll'
// 搜索面板
import searchPanel from './Children/SearchPanel'
export default {
  data () {
    return {
      scroll: 0,
      rightListTop: [],
      flag: false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.$store.dispatch('resSearchNav')
  },
  watch: {
    rearchSideNavData () {
      this.$nextTick(() => {
        this._scrollInit()
        this._scrollTop()
      })
    }
  },
  methods: {
    _scrollInit () {
      // eslint-disable-next-line no-unused-vars
      this.leftScroll = new BScroll('.showLeftNav', {
        scrollY: true
      })
      // eslint-disable-next-line no-unused-vars
      this.rightScroll = new BScroll('.showRightGoods', {
        scrollY: true,
        probeType: 3
      })
      this._scrollEvent()
    },
    // 获取右边每个商品板块的高度
    _scrollTop () {
      const goodsLiTop = []
      const lis = this.$refs.goods.querySelectorAll('.commodity_sector')
      let initLiTop = 0
      goodsLiTop.push(initLiTop)
      Array.prototype.forEach.call(lis, (item, i) => {
        initLiTop += item.clientHeight
        goodsLiTop.push(initLiTop)
      })
      this.rightListTop = goodsLiTop
      console.log(this.rightListTop)
    },
    // 右边滚动事件
    _scrollEvent () {
      this.rightScroll.on('scroll', (pos) => {
        this.scroll = Math.abs(pos.y)
      })
    },
    // 点击导航右边联动
    sideNavCli (i) {
      this.rightScroll.scrollTo(0, -this.rightListTop[i], 300)
      this.scroll = this.rightListTop[i]
    },
    _moveLeftNav (i) {
      const menuLi = this.$refs.siedeNav
      const el = menuLi[i]
      this.leftScroll.scrollToElement(el, 300, 0, -100)
    },
    // 是否显示或者面板
    showSearchPanel (val) {
      this.flag = val
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
  },
  components: {
    searchInput,
    searchPanel
  },
  computed: {
    ...mapState(['rearchSideNavData']),
    _surrent () {
      return this.rightListTop.findIndex((item, i) => {
        this._moveLeftNav(i)
        return (this.scroll >= item) && (this.scroll < this.rightListTop[i + 1])
      })
    }
  }
}
</script>
<style lang='stylus' scoped>
/* @import url(); 引入css类 */
.search {
  height: 100%;
}

.seaGoodsAssort {
  width: 100%;
  height: 100%;
  padding: 51px 0px 0px 0px;
  display: flex;
  flex-direction: row;
  overflow: hidden;

  .showLeftNav {
    width: 89px;
    height: 100%;
    background-color: #fafafa;

    ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-bottom: 40px;

      .goodsNav {
        width: 89px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        position: relative;
      }

      .current {
        color: #e02e24;
      }

      .current::before {
        content: '';
        width: 4px;
        height: 26px;
        position: absolute;
        left: 0px;
        background: #e02e24;
      }
    }
  }

  .showRightGoods {
    height: 100%;
    flex: 1;
    background-color: #fafafa;

    ul {
      width: 100%;
      display: flex;
      flex-direction: column;

      li {
        display: flex;
        flex-direction: column;

        .title {
          height: 37px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0px 4px;
          color: #151516;
          font-size: 15px;
          margin-top: 15px;

          a {
            color: #aeaeae;
            padding-right: 10px;
          }
        }
      }

      .goods {
        flex-direction: row;
        flex-wrap: wrap;
      }

      .goodsItems {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.3%;
        height: 90px;
        padding: 10px 0px;

        span {
          padding-top: 5px;
        }

        img {
          width: 60%;
        }
      }
    }
  }
}

.goodsParent {
  padding-bottom: 40px;
}

.phoneType {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;

  li {
    width: 33%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 80%;
    }
  }
}
</style>
